<template>
  <div class="login">
    <span class="title">专有账号登陆</span>
    <div class="login-form">
      <div class="input">
        <span>账号：</span>
        <input v-model="username" placeholder="请填写专有账号" type="text">
      </div>
      <div class="input">
        <span>密码：</span>
        <input v-model="password" placeholder="请填写专有密码" type="password">
      </div>
      <button @click="login" class="login-btn">登陆</button>
    </div>

  </div>
</template>

<script>
import { status } from '../../util/status'

export default {
    name: 'login',
    data() {
      return {
        username: '',
        password: '',
      }
    },
    methods: {
      async login() {
        const { username, password } = this;
        const resContent = await this.$store.dispatch('login', {
          username,
          password,
        }) 
        if (resContent.status === status.SUCCESS) {
          this.$router.replace('/chat');
        }
      }
    }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(231, 233, 234);
  align-items: center;
}
.login > .title {
  font-size: 26px;
  margin-top: 70px;
  margin-left: 18px;
  align-self: flex-start;
}
.login > .login-form {
  width: 90%;
  display: flex;
  flex-direction: column;
  margin-top: 32px;
}
.login > .login-form > .input  {
  width: 100%;
  height: 64px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid rgb(218, 220, 220);
}

.login > .login-form > .login-btn{
  background-color: rgb(216, 217, 218);
  outline: none;
  border: none;
  height: 48px;
  width: 100%;
  margin-top: 48px;
  color: #969696;
  font-size: 20px;
}

.login > .login-form > .input > span {
  height: 100%;
  flex-shrink: 0;
  line-height: 64px;
  font-size: 20px;
  margin-right: 46px;
}

.login > .login-form > .input > input {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  background-color: inherit;
  font-size: 18px;
}
</style>